<template>
    <div>
        <h2>科室显示</h2>
        <table>
            <tr>
                <td>
                    名称<select v-model="start.introduce">
                        <option value="">请选择</option>
                        <option>内科</option>
                        <option>外科</option>
                        <option>骨科</option>
                        <option>儿童科</option>
                    </select> 
                    <button @click="getShow">查询</button>
                    <button class=" btn btn-primary" @click="Add">添加</button>
                    <button class="btn btn-primary" @click="Dao">导出</button>
                </td>
            </tr>
        </table>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg bg-primary">
                    <td><input type="checkbox"></td>
                    <td>名称</td>
                    <td>科室类别</td>
                    <td>创建时间</td>
                    <td>人数</td>
                    <td>介绍</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in keshiShow">
                    <td><input type="checkbox"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.keshi}}</td>
                    <td>{{item.ketime.substring(0,10)}}</td>
                    <td>{{item.renshu}}</td>
                    <td>{{item.introduce}}</td>
                    <td>
                        <a @click="Delete(item.id)" style="color: red;">删除</a>
                        <a @click="update(item.id)" style="color: blue;">修改</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <table>
            <tr>
                <td>
                    <a @click="show('a')">上一页</a>
                    <a @click="show('b')">下一页</a>
                    <a @click="show('c')">首页</a>
                    <a @click="show('d')">尾页</a>
                    共{{ count }}条{{ sum }}
                </td>
            </tr>
        </table>
            
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import "bootstrap/dist/css/bootstrap.min.css"

const router=useRouter();
const keshiShow=ref([])

const form:any=reactive({
    start:{
        introduce:"",
        index:1,
        size:2
    },
    list:[],
    count:0,
    sum:0
})

const {start,list,count,sum}=toRefs(form);
const getShow=()=>{
        let obj={
            introduce:start.value.introduce,
            index:start.value.index,
            size:start.value.size
        }
    
    axios.get("https://localhost:7015/api/yiliaokeshi/Showkeshi?introduce="+obj.introduce+"&index="+obj.index+"&size="+obj.size).then(res=>{
        keshiShow.value=res.data.data;
        count.value=res.data.count;
        sum.value=res.data.sum;
    })

}

const show=(e:any)=>{
    switch (e){
        case 'a':
          
            start.value.index-=1;
             break;
        case 'b':
         
            start.value.index+=1;
            break;
        case 'c':
         
            start.value.index=1;
            break;
        case 'd':
        
            start.value.index=count.value;
            break;
    }
    getShow();
}

const Delete=(id:number)=>{
    if(confirm("确定删除吗")){
        axios.delete("https://localhost:7015/api/yiliaokeshi/Delkeshi?id="+id).then(res=>{
            if(res.data>0){
                alert("删除成功");
                getShow();
            }
            else
            {
                alert("删除失败");
            }
        
    })
    }

   
}

const update=(id:number)=>{
    router.push("upkeshi?id="+id);
}



const Add=()=>{
    router.push("addkeshi")
}


const Dao=()=>{
    window.location.href="https://localhost:7015/api/yiliaokeshi";
}


 onMounted(()=>{
    getShow();
})


</script>

<style scoped>

</style>